import React, { Component } from 'react'
import { Picker, List } from 'antd-mobile';
import { connect } from "react-redux"
import { loginer } from "../../../../../../redux/login/action"
import axios from "axios"
const colors = [
    {
        label:
            (<div>
                <span>男</span>
            </div>),
        value: '男',
        key: 1
    },
    {
        label:
            (<div>
                <span>女</span>
            </div>),
        value: '女',
        key: 2
    },
];
const colorStyle = {
    display: 'inline-block',
    verticalAlign: 'middle',
    width: '16px',
    height: '16px',
    marginRight: '10px',
};
class sex extends Component {

    state = {
        colorValue: ["男"],
        token : ""
    }
    componentDidMount() {
        this.setState({
            token : this.props.token.token
        })
        if (this.props.user.data.sex == 1) {
            this.setState({
                colorValue: ["男"]
            })
        } else {
            this.setState({
                colorValue: ["女"]
            })
        }
    }
    onChangeColor = (color) => {

        let sex = color[0]
        if (sex === "男") {
            sex = 1
        } else {
            sex = 2
        }



        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8" , 
            "token" : this.props.token.token ,
            "phone" :  this.props.user.data.phone
        };
        axios({
            url: "/set/auther-center/updatepreson",
            method: "post",
            headers: headerJSON,
            data: JSON.stringify({ sex: sex, phone: this.props.user.data.phone })
        }).then((res) => {
            console.log(res)
            this.props.loginer(res.data)
            this.setState({
                colorValue: color,
            });
        })


        
    };
    render() {
        return (
            <li>
                <p>性别</p>
                <div>
                    <Picker
                        data={colors}
                        value={this.state.colorValue}
                        cols={1}
                        onChange={this.onChangeColor}
                    >
                        <List.Item  arrow="horizontal"></List.Item>
                    </Picker>
                </div>
            </li>
        )
    }
}
export default connect(
    state => ({
        user: state.user ,
        token : state.token
    }), {
        loginer
}
)(sex)